<template>
  <div class="login">
    <div class="login-main">
      <div class="login-title">网络安全审计系统</div>
      <div class="login-content">
        <div class="login-txt">欢迎登录</div>
        <a-form-model
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          ref="formRef"
          :model="user"
          :rules="rules"
        >
          <a-form-model-item ref="account" prop="account">
            <a-input
              placeholder="请输入用户名"
              v-model="user.account"
              class="login-input"
              @pressEnter="toLogin"
            >
              <template slot="prefix">
                <img src="/static/images/login/account.png" alt="img" />
              </template>
            </a-input>
          </a-form-model-item>

          <a-form-model-item ref="password" prop="password">
            <a-input-password
              placeholder="请输入密码"
              v-model="user.password"
              class="login-input"
              @pressEnter="toLogin"
            >
              <template slot="prefix">
                <img src="/static/images/login/lock.png" alt="img" />
              </template>
            </a-input-password>
          </a-form-model-item>

          <!-- <a-form-model-item v-if="errorCount > 1" ref="imgCode" prop="imgCode">
            <a-input
              placeholder="请输入图形验证码"
              v-model="user.imgCode"
              class="login-input"
              @pressEnter="toLogin"
            >
              <template slot="prefix">
                <img src="/static/images/login/imgCode.png" alt="img" />
              </template>
            </a-input>
            <div class="diy-code">
              <img :src="imgYzm" alt="验证码" @click="refreshImgYzm" />
            </div>
          </a-form-model-item> -->
        </a-form-model>
        <a-button
          type="primary"
          class="login-btn"
          :loading="loading"
          @click="toLogin"
          >登录</a-button
        >
        <div class="login-footer clearfix">
          <div class="cursor">忘记密码？</div>
          <div>
            <span> 剩余使用60天， </span>
            <span class="cursor"> 立即注册 </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        account: "",
        password: "",
        imgCode: "",
      },
      labelCol: { span: 0 },
      wrapperCol: { span: 24 },
      loading: false,
      rules: {
        account: [
          {
            required: true,
            message: "请输入用户名",
            trigger: ["blur", "change"],
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: ["blur", "change"],
          },
        ],
        // imgCode: [
        //   {
        //     required: true,
        //     message: '请输入图形验证码',
        //     trigger: ['blur', 'change'],
        //   },
        // ],
      },
    };
  },
  methods: {
    toLogin() {
      console.log("login");
      top.location.href = "./index.html";
    },
  },
};
</script>

<style scoped lang="less">
.login {
  width: 100%;
  height: 100%;
  padding-top: 200px;
  background-color: pink;
  padding-left: 350px;
  .login-main {
    width: 400px;
  }
  .login-title {
    font-size: 30px;
    text-align: center;
    padding-bottom: 12px;
    color: #fff;
  }
  .login-content {
    border-radius: 4px;
    border: solid 1px #60707a;
    padding: 20px 24px;
    background-color: #2b4247;
  }
  .login-txt {
    color: #e8eaea;
    font-size: 18px;
    text-align: center;
    margin-bottom: 16px;
  }
  .login-input {
  }
  .login-btn {
    width: 100%;
    height: 54px;
    margin-top: 14px;
    background-color: #10989d;
    font-size: 18px;
  }
  .login-footer {
    padding-top: 20px;
    color: #d9dbdc;
    > div:nth-child(1) {
      float: left;
    }
    > div:nth-child(2) {
      float: right;
    }
    .cursor {
      color: @theme-color;
    }
  }
}
</style>
